<template>
	<div class="apk-box">
		<Layout>
			<Header class="header">
				<Row>
					<Col :span="24">
					<div>
						<span class="border-left"></span>
						安卓APK包版本管理
					</div>
					</Col>
				</Row>
			</Header>
			<Content class="content">
                <div class="card-add">
                    <div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
                        <div class="ivu-card-head">
                            <p data-v-57b29fc1="">安卓APK包版本管理</p>
                        </div>
                        <div class="ivu-card-body"> 
                            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="160" style="width:40%;max-width:600px;min-width:400px">
                                <FormItem label="版本号" prop="version">
                                    <Input v-model="formValidate.version"></Input>
                                    <span>当前版本号：v1.0</span>
                                </FormItem>
                                <FormItem label="版本信息" prop="remark">
                                    <Input v-model="formValidate.remark" type="textarea" :autosize="{minRows: 5,maxRows: 10}" placeholder="请输入版本信息"></Input>
                                </FormItem>
                                <FormItem label="apk安装包上传" prop="isSelectFile">
                                    <!-- <Input type="file" accept=".apk"></Input> -->
                                    <input type="file" accept=".apk" class="ivu-input ivu-input-default" @change="upload" ref="apkFile"/>
                                </FormItem>
                                <div class="btn-box">
                                    <Button type="primary" @click="submit">保存</Button>
                                </div>
                            </Form>
                        </div>
                    </div>
                </div>
			</Content>
			<Footer>
				<p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
			</Footer>
		</Layout>
	</div>

</template>

<script>
	// import img from '../../assets/img/01.jpg'
	import * as api from '@/api/api'
	export default {
		data() {
			return {
                host: window.location.host,
                loading: this.$store.state,
                img_host: 'http://renli.oss-cn-shenzhen.aliyuncs.com/', //图片域名
                formValidate: {
                    version: '',
                    remark: '',
                    url: '',
                    isSelectFile: ''
                },
                ruleValidate: {
                    version: [
                        { required: true, message: '请填写版本号', trigger: 'blur' }
                    ],
                    remark: [
                        { required: true, message: '请填写版本说明', trigger: 'blur' }
                    ],
                    isSelectFile: [
                        { required: true, message: '请选择文件', trigger: 'blur' }
                    ]
                }
			}
		},
		mounted() {
			this.getList();
		},

		computed: {

		},

		watch: {

		},

		methods: {
			getList() {
                this.loading.isLoading = false;
            },
            upload(e) {
               if(e.target.files.length > 0) {
                    this.formValidate.isSelectFile = '1111'
               }else{
                    this.formValidate.isSelectFile = ''
               }
               console.log(this.formValidate)
            },
            submit() {
                this.loading.isLoading = true;
                this.$refs.formValidate.validate((valid) => {
                    console.log(1111)
                    let file = this.$refs.apkFile.files[0];
                    let formdata = new FormData();
                    formdata.append('file',file);
                    console.log(formdata)
                    api.uploadImg(formdata).then(res => {
                        console.log(res)
                        this.loading.isLoading = false;
                    })
                })
            }
		}
	}

</script>


<style lang="less">
	@import '../../assets/styles/constant.less';

	.apk-box {
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		background-color: #f5f7f9;

		.ivu-layout {
			min-height: 100%;
		}

		.header {
			font-size: 14px;
			line-height: 40px;
			height: 40px !important;
			color: #434343;
			padding: 0 50px;
			background-color: @background;
			border-bottom: 1px solid #ddd;

			.border-left {
				border-left: 5px solid @baseColor;
				margin-right: 4px;
			}
		}

		.content {
			width: 100%;
			min-height: 76%;
			padding: 20px 60px;
			.card-add{
                margin-top: 20px;
                .ivu-card-head{
                    background-color: #f2f2f2;
                }
                .ivu-card-body{
                    display: flex;
                    justify-content: space-around;
                }
                
            }
            .ivu-form-item-content {
                text-align: right;
            }
            .ivu-card-head {
                background-color: #f2f2f2;
            }
            .btn-box {
                text-align: right;
            }
		}

		.copy-right {
			text-align: center;
			color: #aaa;
			font-size: 12px;
		}
	}

</style>
